<script setup>
import {ref} from "vue";

const caseTypes = ref(['民事案件','刑事案件','行政案件'])
const caseType = ref('')
const step = ref(1)

const handleStep = (num) => {
  step.value = num
}

const handleCaseType = (item) => {
  caseType.value = item
}

</script>

<template>

  <div>

    <div class="step">
       <div @click="handleStep(1)" :class="{active: step === 1}" style="padding: 10px;cursor: pointer;">步骤1：案件类型</div>
       <div @click="handleStep(2)" :class="{active: step === 2}" style="padding: 10px;cursor: pointer;">步骤2：案情描述</div>
       <div v-on:click="handleStep(3)" :class="{active: step === 3}" style="padding: 10px;cursor: pointer;">步骤3：提交材料</div>
    </div>

    <div class="step1" v-if="step === 1">
      <h3>案件类型</h3>
      <ul>
        <li :class="{active : item===caseType  }" v-for="(item,index) in caseTypes" :key="index">
          <p @click='handleCaseType(item)'>{{item}}</p>
        </li>
      </ul>
    </div>
    <div class="step2" v-if="step === 2">
      <h3>案情描述</h3>
      <textarea rows="10" style="width: 100%;">

      </textarea>
    </div>
    <div class="step3" v-if="step ===3">
      <h3>上传证据材料</h3>
      <div>
        <input type="file" multiple>
      </div>
    </div>
    <div class="tool">
      <button v-if="step > 1" @click="step -= 1">上一步</button>
      <button v-if=" step < 3" @click="step += 1">下一步</button>
      <button v-if="step === 3">提交申请</button>
    </div>
  </div>

</template>

<style scoped>

.step{
  display: flex;
  justify-content: space-between;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
}

.active {
  background: #42b883;
}

ul {
  list-style: none;
}

ul li {
  margin-top: 10px;
  border: 1px solid #7c7878;
  cursor: pointer;
}

.tool{
  margin-top: 20px;
}


</style>